.diagram-container {
    padding: 2px;
    width: calc(100% - 2px);
    height: calc(100vh - 2px);
    /*border: 1px solid black;*/
    font-size: 12px;
    background-color: #DEE7EB;
}

::deep .default-node {
    width: 280px;
    height: 60px;
    border-radius: 2px;
    background-color: #ffffff;
}

::deep .default-node .diagram-port, .default.diagram-group .diagram-port {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
}

::deep .default-node .diagram-port:hover {
    background-color: #51B4C2;
}

::deep .default-node .diagram-port.has-links, .default.diagram-group .diagram-port.has-links {
    background-color: #51B4C2;
}

::deep .default-node .diagram-port, .default.diagram-group .diagram-port {
    margin: -6px;
}

::deep .diagram-canvas {
    overflow: auto;
}

::deep .diagram-node.locked {
    /* cursor: pointer; */
    cursor: default;
}

.diagram-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: calc(100% - 2px);
    align-content: center;
    flex-wrap: nowrap;
}

::deep .diagram-link div.default-link-label {
    background-color: transparent;
    color: #000000;
}

::deep .diagram-link path:not(.selection-helper) {
    stroke-dasharray: 5;
    animation: dash .5s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -10;
    }
}
